<style lang="scss" scoped>
dl {
  width: 100%;
  height: 200px;
  background: #f8f6f6;
  border-radius: 20px;
  padding: 10px;
  margin: 20px 0;
  display: flex;
  dt {
    img {
      width: 50px;
      height: 50px;
    }
  }
  dd {
    .dl1 {
      display: flex;
      span {
        margin-left: 10px;
        font-size: 15px;
        align-content: center;
      }
    }
    button {
      height: 35px;
      
      
    }
  }
}
</style>
<template>
  <div>
    <van-nav-bar
      title="我的预约挂号列表"
      left-arrow
      @click-left="$router.back()"
    />
    <van-empty description="暂无挂号订单" v-if="orderListData.length < 0" />
    <div>
      <dl v-for="(item, index) in orderListData" :key="index">
        <dt>
          <img :src="item.doctorimage" alt="" />
        </dt>
        <dd>
          <div class="dl1">
            <h1>{{ item.doctorname }}</h1>
            <span>{{ item.doctorstate }}</span>
          </div>
          <div>{{ item.doctoradministre }}|{{ item.nosocomium }}</div>
          <div>患者姓名:{{ item.orderuser }}</div>
          <div>就诊时间:{{ item.ordertime }}</div>
          <div>
            预约费用: <span style="color: red">￥{{ item.doctorprice }}</span>
          </div>
          <div>
            <van-button round plain type="success" @click="assess">我要评价</van-button>
            <van-button round  @click="Detail(item)">查看详情</van-button>
            <van-button round plain type="success" @click="aginMake(item)">再次预约</van-button>
          </div>
        </dd>
      </dl>
    </div>
    <footer>
      
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import type { userState } from '@/interface/index'
import { useRouter,useRoute } from 'vue-router';
const router = useRouter()


const orderListData = ref<userState[]>([])
const orderList = async () => {
  const res = await axios.get('/api/order')
  const { data } = res.data
  console.log(data)
  orderListData.value = data
}
orderList()


const assess=()=>{
router.push('/assess')
}
const Detail=(item:userState)=>{
  
  router.push(`/Guahao/${item.doctorid}`)
}
const aginMake=(item:userState)=>{
router.push(`/RDoctor/${item.doctorid}`)
}
</script>
